<template>
  <root-portal>
    <uv-popup
      ref="popupRef"
      mode="bottom"
      bg-color="#fff"
      round="24rpx"
      :close-on-click-overlay="false"
    >
      <view class="title">
        <text>{{ title }}</text>
        <view class="close" @click="close">
          <uv-icon name="close" size="30rpx" color="#979797"></uv-icon>
        </view>
      </view>
      <view class="canteen-list plr30">
        <view
          class="canteen-info df-sbc"
          v-for="(item, index) in bindMechanismList"
          :key="index"
          @tap="changeMechanismId(item.mechanismId)"
        >
          <text class="ft-28">{{ item.mechanismName }}</text>
          <text
            class="custom-icon custom-icon-Subtract checked-icon ft-30"
            v-if="item.mechanismId == canteenId"
          ></text>
          <text
            class="custom-icon custom-icon-weixuanze unchecked-icon ft-30"
            v-else
          ></text>
        </view>
      </view>
      <k-footer :loading="loading" @click="confirmFn">确认</k-footer>
    </uv-popup>
  </root-portal>
</template>
<script setup>
import { onMounted, ref } from 'vue';
import { storeToRefs } from "pinia";
import KFooter from "@/components/k-footer/k-footer";
import { useUserStore } from '@/store';
import storage from "@/utils/storage";

const emits = defineEmits(['onRefresh', 'close']);
const props = defineProps({
  title: {
    type: Object,
    default: '切换食堂',
  },
});
const canteenId = ref();
const userStore = useUserStore();
const { bindMechanismList } = storeToRefs(userStore);
onMounted(() => {
  open();
});
const loading = ref(false);

const popupRef = ref();
function open() {
  uni.hideTabBar();
  canteenId.value = storage.get("MID");
  popupRef.value.open();
}
function close() {
  emits('close');
  popupRef.value.close();
}
const changeMechanismId = (id) => {
  canteenId.value = id;
};
const confirmFn = () => {
  if (canteenId.value == storage.get('MID')) {
    close();
    return;
  }
  storage.set("MID", canteenId.value);
  onRefresh();
  close();
};
const onRefresh = () => {
  emits('onRefresh');
};
defineExpose({ open, close });
</script>

<style scoped lang="scss">
.title {
  padding: 40rpx 0;
  text-align: center;
  font-weight: bold;
  .close {
    position: absolute;
    right: 50rpx;
    top: 50rpx;
  }
}
.canteen-info {
  width: 100%;
  height: 96rpx;
  border-bottom: 1rpx solid #e6e6e6;
  color: #414141;
}
.checked-icon {
  color: $base-color;
}
.unchecked-icon {
  color: #979797;
}
</style>
